屬性綁定 v-bind:class

我們在修改網頁樣式時，比較常見的做法是寫一個獨立的 SASS 或其他支援樣式的語言，然後再將它嵌套至網頁中，現在除了這樣的方式，Vue 也提供了專門為 class 和 style 的 v-bind 方法。

綁定對象

在使用動態切換的時候，可以給 :class 傳遞一個需要被切換的對象：

<div :class="{ active: isActive }"></div>

active 是否做切換則取決於 isActive 的真假值。

下面的範例，當我們給予 isActive 和 hasError 一個真假值，它就能夠在網頁上做切換：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

給予一個配合上面範例的模版：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

這段程式碼代表的是，在 static 這段 class 的樣式上，我們會用真假值去做 active 和 text-danger 的動態切換。

於是渲染結果會是這樣：

<div class="static active"></div>

這就是當 active 的值 isActive 為 true，text-danger 的值 hasError 為 false 時的渲染結果，反之則會呈現這樣的渲染狀態：<div class="static active text-danger">

:class 也可以直接綁定一個對象：

data() {
  return {
    object: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="object"></div>

這也會呈現和上面一樣的結果。

當我們的樣式需要較複雜的方式呈現，甚至可以給予一個函式：

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  object() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

綁定數據

:class 也可以綁定多個數組：

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

<div :class="[activeClass, errorClass]"></div>

渲染的結果：

<div class="active text-danger"></div>

或者當我們的樣式需要有條件的渲染，也可以透過三元表達式呈現，在這裡就不多做解說了，如果還想要知道更多，推薦可以在官方看到非常多的 :class 使用方法。

➔
任務：
操作 這個模板，執行以下要求 ( 只能操作 HTML 的部分 )：

點擊「改變樣式」按鈕，會透過改變 isTransform 的 true / false：

1. 替 Q1 加上 stretch 這個 class
2. 替 Q2 加上 stretch、 colorChange 這兩個 class

解答：

CodePen：https://codepen.io/kimberly8/pen/eYMajKG?editors=1111

<div id="app">
  <div class="container p-3" >
    <h3>Q1. 延伸</h3>
    <div 
       class="box mb-3"
       :class="{ 'stretch': isTransform  }"
    ></div>
    <h3>Q2. 延伸 + 變色</h3>
    <div 
       class="box mb-3"
       :class="[{ 'stretch': isTransform  }, { 'colorChange': isTransform }]"
    ></div>
    <button 
       type="button" 
       class="btn btn-primary"
       @click="isTransform = !isTransform"
    >
      改變樣式
    </button>
  </div>
</div>

參考資料：
Vue 官方